$duration: 250ms;

@keyframes BgShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes BgHide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes CenterShow {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes CenterHide {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes PullUpShow {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes PullUpHide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}
@keyframes PullDownShow {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes PullDownHide {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}
@keyframes PullLeftShow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes PullLeftHide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes PullRightShow {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes PullRightHide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6);
  &.bgTransparent {
    background-color: transparent;
  }
}
.box {
  position: relative;
  z-index: 2;
}
.bgShow {
  animation: BgShow $duration forwards;
}
.bgHide {
  animation: BgHide $duration forwards;
}

.centerShow {
  animation: CenterShow $duration forwards;
}
.centerHide {
  animation: CenterHide $duration forwards;
}

.pullUp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.pullUpShow {
  animation: PullUpShow $duration forwards;
}
.pullUpHide {
  animation: PullUpHide $duration forwards;
}
.pullDown {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.pullDownShow {
  animation: PullDownShow $duration forwards;
}
.pullDownHide {
  animation: PullDownHide $duration forwards;
}
.pullLeft {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
.pullLeftShow {
  animation: PullLeftShow $duration forwards;
}
.pullLeftHide {
  animation: PullLeftHide $duration forwards;
}
.pullRight {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}
.pullRightShow {
  animation: PullRightShow $duration forwards;
}
.pullRightHide {
  animation: PullRightHide $duration forwards;
}
